<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>查询条件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <style>
        .mui-card .mui-control-content {
            padding: 10px;
        }
        * { touch-action: none; }

        /*自定义样式*/
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        a{
            color: #ffffff;
        }
        .mui-content{
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        .mui-bar{
            background:#4F77AA ;
            color: #ffffff;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
            box-shadow: 0 0 1px rgba(0,0,0,0);
        }
        .mui-title{
            color: #ffffff;
        }
        .mui-content .mui-content-item{
            width:100%;
            height:calc(100% - 120px);
        }
        .mui-content .mui-content-item .mui-control-content{
            width: 100%;
            height:100%;
        }
        .bottom_submit{
            position: absolute;
            width: 100%;
            height: 48px;
            text-align: center;
            line-height: 48px;
            bottom: 0;
            background: #4F77AA;
        }
        .mui-btn-blue, .mui-btn-primary, input[type=submit]{
            width:100%;
            height:48px;
            line-height: 48px;
            background:#4F77AA ;
            border:none;
            padding: 0;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
    <h1 class="mui-title">查询条件</h1>
</header>
<div class="mui-content">
    <form class="mui-input-group">
        <div class="mui-input-row">
            <label>Input</label>
            <input type="text" placeholder="普通输入框">
        </div>
        <div class="mui-input-row">
            <label>Input</label>
            <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入" data-input-clear="6" data-input-speech="6"><span class="mui-icon mui-icon-clear mui-hidden"></span><span class="mui-icon mui-icon-speech"></span>
        </div>
        <!--<div class="bottom_submit">-->
            <!--<input type="submit" value="提交" id="submit">-->
        <!--</div>-->
        <div class="mui-button-row">
            <button type="button" class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
            <button type="button" class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
        </div>
    </form>
</div>
<script src="../../js/jquery-1.11.3.js"></script>
<script src="../../js/mui.min.js"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });
    $(document).on("click","span.mui-pull-left",function(){
        window.location.href="../../../index.html";
    })
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        var segmentedControl = document.getElementById('segmentedControl');
        $('.mui-input-group').on('change', 'input', function() {
            if (this.checked) {
                var styleEl = document.querySelector('input[name="style"]:checked');
                var colorEl = document.querySelector('input[name="color"]:checked');
                if (styleEl && colorEl) {
                    var style = styleEl.value;
                    var color = colorEl.value;
                    segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
                }
            }
        });
    })(mui);
</script>

</body>

</html>
